<template>
  <DatePicker
    type="date"
    :style="{ width: width + '%' }"
    :editable="false"
    :options="options"
    :placeholder="ph"
    :value="value"
    @on-change="change"
  ></DatePicker>
</template>

<script>
export default {
  name: "MyDatePicker",
  data() {
    return {
      /**
       * 选项
       */
      options: {
        shortcuts: [
          {
            text: "今天",
            value() {
              return new Date();
            },
          },
          {
            text: "昨天",
            value() {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              return date;
            },
          },
          {
            text: "一周前",
            value() {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              return date;
            },
          },
          {
            text: "一月前",
            value() {
              const date = new Date();
              date.setMonth(date.getMonth() - 1);
              return date;
            },
          },
        ],
      },
    };
  },
  methods: {
    /**
     * 改变日期时
     */
    change(date) {
      this.$emit("input", date);
    },
  },
  props: {
    /**
     * 宽度
     */
    width: {
      type: Number,
      default: 50,
    },
    /**
     * 绑定的日期
     */
    value: Date | String,
    /**
     * placeholder
     */
    ph: {
      type: String,
      default: "起始日期",
    },
  },
};
</script>